// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 指定预览区域
let options = {
  aspectRatio: 1,
  // 指定预览区域
  preview: ".preview",
}

$image.cropper(options)

// 模拟点击
$('#btnChooseImage').on('click', function () {
  $("#file").click()

})


// 注册change事件
$('#file').on('change', function () {
  // 1. 找到选择的图片（文件对象）
  let file = this.files[0]; // 我们选择的图片的文件对象

  if (!file) {
    return layer.msg('请选择文件')
  }
  // 2. 根据文件对象，生成一个临时的url，用于访问被选择的图片
  let url = URL.createObjectURL(file)

  // 3. 更换剪裁区的图片的src属性
  // - 销毁原理的剪裁区
  // - 更换图片
  // - 重新创建剪裁区
  $image.cropper('destroy').attr('src', url).cropper(options);
});


// 上传新头像 
$('#btnCreateAvatar').on('click', () => {
  // 剪裁得到一张图片（canvas图片）
  let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
  });

  // 把图片转成base64格式
  let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
  // console.log(dataURL)
  axios.post('/my/update/avatar', `avatar=${encodeURIComponent(dataURL)}`)
  .then(({ data: { message, status } }) => {
    // console.log(res)
    if (status !== 0) {
      return layer.msg(message)
    }
    layer.msg(message)
    window.parent.fn()
  })
})